<template>
  <div class="container">
    <error-tip></error-tip>
    <div v-if="!errorCode">
      <day-card :data="dayData"></day-card>
      <day-list :data="dayData"></day-list>
    </div>
  </div>
</template>

<script>
import getData from '@/services'
import { getNowDate } from '@/libs/utils'
import { computed, onMounted, watch } from 'vue'
import { useStore } from 'vuex'

import ErrorTip from '@/components/ErrorTip'
import DayCard from '@/components/DayPage/Card'
import DayList from '@/components/DayPage/List'

export default {
  name: 'DayPage',
  components: { DayCard, DayList, ErrorTip },
  setup() {
    const store = useStore(),
      state = store.state

    onMounted(() => {
      getData(store, 'day', getNowDate('day'))
    })

    watch(
      () => state.dayData,
      () => {
        store.commit('setErrorCode', 0)
      }
    )

    return {
      dayData: computed(() => state.dayData),
      errorCode: computed(() => state.errorCode),
    }
  },
}
</script>
